<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <script src="./js/tools.js"></script>
    <script src="./js/api_v1.js"></script>
    <script src="./js/swiperValidate.js"></script>
    <style>
        .body {
            height: 600px;
            background: url(./images/banner.jpg) no-repeat center/auto 600px;
            background-size: auto 600px;
            border-top: 1px solid ;
        }
        .body > .content > .login {
            position: relative;
            width: 350px;
            height: 360px;
            /* border: 1px solid red; */
            margin-top: 82px;
            left: 65%;
            background-color: #fff;
        }
        .login > p {
            color: black;
            font-size: 14px;
            margin-top: 5px;
            margin-left: 25px;
        }
        .login > .login-active {
            display: flex;
            position: relative;
            align-items: center;
            width: 300px;
            border: 1px solid #6666;
            margin: 0 auto;
            box-sizing: border-box;
            margin-top: 16px;
        }
        .login > .login-active > span {
            position: absolute;
            font-size: 12px;
            color: red;
            top: 40px;
            display: none;
        }
        .login > .login-active > .active {
            display: block;
        }
        .login input {
            border: 1px solid transparent;
            box-sizing: border-box;
            height: 40px;
            width: 260px;
        }
        .login > .login-active > i {
            background-color: rgba(243,243,243,0.9);
            background-repeat: no-repeat;
            background-size: 20px 20px;
            background-position: center;
            width: 40px;
            height: 40px;
        }
        .login > div:nth-of-type(1) > i {
            background-image: url(./images/zhuceyonghu.png);
        }
        .login > div:nth-of-type(2) > i {
            background-image: url(./images/dengluzhucemima.png);
        }
        .login > div:nth-of-type(3) > i {
            background-image: url(./images/dengluzhucemima.png);
        }
        .login > .login-check {
            margin-left: 25px;
            margin-top: 20px;
        }
        .login > .login-check > span {
            font-size: 12px;
            vertical-align: middle;
        }
        .login > .login-check input {
            vertical-align: middle;
            width: 15px;
            height: 15px;
        }
        .login > .login-login {
            width: 300px;
            margin: 0 auto;
            margin-top: 20px;
        }
        .login > .login-login > button {
            display: block;
            font-size: 16px;
            color: whitesmoke;
            box-sizing: border-box;
            margin: 0 auto;
            width: 290px;
            height: 40px;
            border: 1px solid rgb(0, 186, 214);
            border-radius: 5px;
            background-color: rgb(0, 186, 214);
        }
        .login > .login {
            margin-left: 25px;
            margin-top: 15px;
        }
        .login > .login > span {
            font-size: 12px;
            vertical-align: middle;
        }
        .login > .login > a {
            margin-left: 5px;
            font-size: 12px; 
            color: rgb(0, 186, 214);
            vertical-align: middle;
        }
        .body > .b-container {
            display: none;
            position: absolute;
            top: 0px;
            z-index: 1;
            width: 100%;
            height: 720px;
            background-color:rgb(255,255,255,0.5);
        }
        .body > .b-container > .b-box {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 200px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #fff;
        } 
    </style>
</head>
<body>
    <div class="head-container">

    </div>
    <div class="body">
        <div class="b-container">
            <div class="b-box">3秒后跳转到登录界面...</div>
        </div>
        
        <div class="content">
            <div class="login">
                <p>用户注册</p>
                <div class="login-tel login-active">
                    <i></i><input type="text" placeholder="请输入11位手机号" value="" id="tel">
                    <span>请输入11位手机号</span>
                </div>
                
                <div class="login-pwd1 login-active">
                    <i></i><input type="password" placeholder="大小写字母与数字" id="pwd1">
                    <span>请填写密码，8-16个字符，可以包含大小写字母和下划线</span>
                </div>
                
                <div class="login-pwd2 login-active">
                    <i></i><input type="password" placeholder="再次确认密码" id="pwd2">
                    <span>密码与确认密码不相符，请重新填写</span>
                </div>
               
                <div class="login-check">
                    <input type="checkbox"> <span>我已阅读并同意 <a href="">会员注册协议</a> 和 <a href="">隐私保护政策</a></span>
                </div>
                <div class="login-login">
                    <button>注册</button>
                </div>
                <div class="login">
                    <span>已有顺电账号</span><a href="./login.html">直接登录</a>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-container">

    </div>
</body>
<script>
    async function reLoadHeader(){
        let headContent = document.querySelector(".head-container");
        const res = await loadHeader({});
        headContent.innerHTML = res ; 
    } 
    reLoadHeader();
</script>
<script>
    async function reLoadFooter(){
        const res = await loadFooter({});
        let footContent = document.querySelector(".footer-container");
        footContent.innerHTML = res;
        let weiboEles = document.querySelectorAll(".weibo");
        weiboEles.forEach(( item , key )=>{
            item.onmouseenter = function (){
                let x = this.offsetWidth ; 
                let y = this.offsetHeight ; 
                let divEle = document.createElement("div");
                divEle.style.position = "absolute" ;
                divEle.style.width = x + "px" ;
                divEle.style.height = x + "px" ;
                divEle.style.top = - x + "px" ; 
                if( key == 0 ){
                    divEle.style.backgroundImage = "url(./images/weibo.jpg)" ;
                } else if ( key == 1 ){
                    divEle.style.backgroundImage = "url(./images/weixin.jpg)" ;
                }
                divEle.style.backgroundSize = `${x}px ${x}px` ; 
                item.appendChild(divEle);
            }
            item.onmouseleave = function (){
                let divEle = this.querySelector("div");
                divEle.remove();
            }
        });
    } 
    reLoadFooter();
</script>
<script>
    let telEle = document.querySelector("#tel") ;
    let pwd1Ele = document.querySelector("#pwd1") ;
    let pwd2Ele = document.querySelector("#pwd2") ;
    let checkEle = document.querySelector(".login-check input");
    let loginEle = document.querySelector(".login-login");
    let arr = [false,false,false,false] ;
    telEle.onblur = async function (){
        let reg = /^[1][3-9][0-9]{9}$/;
        if( !reg.test( this.value ) ){
            this.nextElementSibling.classList.add("active");
        } else {
            const res = await register({opt:'selTel',tel:this.value}) ; 
            if ( res['status'] == 1 ){
                this.nextElementSibling.classList.add("active");
                this.nextElementSibling.innerHTML = "账号已存在!" ;
            } else {
                this.nextElementSibling.classList.remove("active");
                arr[0] = true ;
            }
        }
        this.parentElement.style.borderColor = "#999" ;
    }
    telEle.onfocus = function (){
        this.parentElement.style.borderColor = "rgb(0, 186, 214)" ;
    }
    pwd1Ele.oninput = function (){
        let res = this.value;
        let reg = /\w{8,16}/g ;  
        if ( reg.test(this.value) ){
            switch(true){
                case /[A-Z]/.test(res) && /[a-z]/.test(res) && /_/.test(res) && /\d/.test(res) :
                    this.nextElementSibling.innerHTML = "密码强度高";
                    this.nextElementSibling.style.color = "blue" ;
                break; 
                case /[A-Z]/.test(res) || /[a-z]/.test(res) && /\d/.test(res) : 
                    this.nextElementSibling.innerHTML = "密码强度中" ;
                    this.nextElementSibling.style.color = "rgb(241,215,0)" ;
                break;
                case /[A-Z]/.test(res) || /a-z/.test(res) || /\d/.test(res) :
                    this.nextElementSibling.innerHTML = "密码强度低" ;
                    this.nextElementSibling.style.color = "red" ;
                break;
                default:"";
                break;
            }
        } else {
            this.nextElementSibling.innerHTML = "请填写密码，8-16个字符，可以包含大小写字母和下划线" ;
            this.nextElementSibling.style.color = "red" ;
            this.nextElementSibling.classList.add("active");
        }
    }
    pwd1Ele.onfocus = function (){
        this.parentElement.style.borderColor = "rgb(0, 186, 214)" ;
    }
    pwd1Ele.onblur = function (){
        let reg = /\w{8,16}/g ;
        if( reg.test(this.value) ){
            arr[1] = true ; 
        } else {
            this.nextElementSibling.classList.add("active");
        }
        this.parentElement.style.borderColor = "#999" ;
    }
    pwd2Ele.onfocus = function (){
        this.parentElement.style.borderColor = "rgb(0, 186, 214)" ;
    }
    pwd2Ele.onblur = function (){
        console.log(pwd2Ele.value,pwd1Ele.value);
        if( pwd2Ele.value !== pwd1Ele.value ){
            this.nextElementSibling.classList.add("active");
        } else {
            arr[2] = true ; 
        }
        this.parentElement.style.borderColor = "#999" ;
    }
    checkEle.onclick = function (){
        arr[3] = this.checked ; 
    } 
    loginEle.onclick = async function (){
        if( arr.every(item=>item) ){
            let tel = telEle.value ; 
            let pwd = pwd1Ele.value ; 
            const res = await register({opt:'register',tel,pwd});
            if ( res['status'] == 1 ){  
                document.querySelector(".b-box").style.display = "block" ;
                document.querySelector(".b-container").style.display = "block" ;
                setTimeout(()=>{
                    window.location.href = "./login.html" ;
                },3000)
            }
        }
    }
</script>

</html>